<template>
  <div class="page">
    <div class="content">
      <div class="searchCard">
        <el-card>
          <div slot="header" class="clearfix">
            <span>日志查询</span>
            <el-button style="position: relative; left: 90%" type="success" size="small">新增</el-button>
          </div>
          <div class="searchList">
            <el-row style="margin-top: 10px" :gutter="20">
              <el-col :span="6">
                <div class="conditionItem">
                  <span>工作内容</span>
                  <el-input
                    size="small"
                    placeholder="请输入项目名称"
                    v-model="workContent"
                    @keyup.enter.native="handleEnter"
                  ></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="conditionItem">
                  <span>项目名称</span>
                  <el-input @keyup.enter.native="alert('hahahah')" size="small" placeholder="请输入项目名称"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="conditionItem">
                  <span>项目名称</span>
                  <el-input @keyup.enter.native="alert('hahahah')" size="small" placeholder="请输入项目名称"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="conditionItem">
                  <span>项目名称</span>
                  <el-input @keyup.enter.native="alert('hahahah')" size="small" placeholder="请输入项目名称"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-table border :data="tableData" ref="logTableRef" size="small" @current-change="handleCurrentChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="部门名称" prop="depName" width="70" fixed align="center"></el-table-column>
            <el-table-column label="人员" prop="name" width="50" fixed align="center"></el-table-column>
            <el-table-column label="类别" prop="type" width="50" fixed align="center"></el-table-column>
            <el-table-column label="日期" width="100" sortable align="center">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column label="开始时间" prop="start" width="70" align="center"></el-table-column>
            <el-table-column label="结束时间" prop="end" width="70" align="center"></el-table-column>
            <el-table-column label="工作时间" prop="workTime" width="70" align="center"></el-table-column>
            <el-table-column label="工作内容" width="110" align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.projectName.indexOf('院科') ? 'primary' : 'success'">
                  {{ scope.row.projectName }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="工作量" prop="content" width="500"></el-table-column>
            <el-table-column label="备注" prop="remarks" width="100"></el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <!-- <el-card>
        <el-table border :data="tableData" ref="logTableRef" size="small" @current-change="handleCurrentChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="部门名称" prop="depName" width="70" fixed align="center"></el-table-column>
          <el-table-column label="人员" prop="name" width="50" fixed align="center"></el-table-column>
          <el-table-column label="类别" prop="type" width="50" fixed align="center"></el-table-column>
          <el-table-column label="日期" width="100" sortable align="center">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column label="开始时间" prop="start" width="70" align="center"></el-table-column>
          <el-table-column label="结束时间" prop="end" width="70" align="center"></el-table-column>
          <el-table-column label="工作时间" prop="workTime" width="70" align="center"></el-table-column>
          <el-table-column label="工作内容" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.projectName.indexOf('院科') ? 'primary' : 'success'">
                {{ scope.row.projectName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="工作量" prop="content" width="500"></el-table-column>
          <el-table-column label="备注" prop="remarks" width="100"></el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkLog',
  data() {
    return {
      workContent: '',
      formData: {
        name: ''
      },
      tableData: [
        {
          depName: '研发室',
          name: '石硕',
          type: '内业',
          date: '2021-04-01',
          start: '08:00',
          end: '12:00',
          workTime: '4.0',
          projectName: '院科19-88',
          content: '总结项目进度，制作项目汇报PPT',
          remarks: ''
        },
        {
          depName: '研发室',
          name: '石硕',
          type: '内业',
          date: '2021-04-01',
          start: '14:30',
          end: '18:00',
          workTime: '3.5',
          projectName: '院科19-88',
          content: '总结项目进度，制作项目汇报PPT',
          remarks: ''
        },
        {
          depName: '研发室',
          name: '石硕',
          type: '内业',
          date: '2021-04-01',
          start: '08:00',
          end: '12:00',
          workTime: '4.0',
          projectName: '院科19-88',
          content: '总结项目进度，制作项目汇报PPT',
          remarks: ''
        },
        {
          depName: '研发室',
          name: '石硕',
          type: '内业',
          date: '2021-04-01',
          start: '14:30',
          end: '18:00',
          workTime: '4.0',
          projectName: '院软19-10',
          content: '总结项目进度，制作项目汇报PPT',
          remarks: ''
        }
      ]
    }
  },
  methods: {
    handleEnter() {
      console.log('enter')
    },
    handleClick(row) {
      console.log(row)
      console.log(this.$logTableRef.tableData)
    },
    handleCurrentChange(val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  .content {
    // padding: 0 20px;
    .searchCard {
      margin-bottom: 40px;
      .searchList {
        margin-bottom: 30px;
      }
      .el-card__header {
        padding: 10px 20px;
        border-bottom: 1px solid #ebeef5;
        box-sizing: border-box;
      }
      .conditionItem {
        display: flex;
        span {
          width: 100px;
          line-height: 30px;
          // text-align: end;
          // margin-right: 20px;
        }
        // .el-input {
        //   margin-right: 10px;
        // }
      }
    }
  }
}
</style>
>
